<template>
  <a-card :bordered="false" header-style="height: 48px">
    <template #extra>
      <a-space style="color: #4CAF50">
        <a-tooltip :content="'共有' + question.likes + '人点赞该题'" mini background-color="#3491FA">
          <icon-thumb-up-fill/>
          <span style="font-size: 12px">{{ question.likes }}</span>
        </a-tooltip>
        <a-tooltip :content="'共有' + question.favorites + '人收藏该题'" mini background-color="#3491FA">
          <icon-star-fill/>
          <span style="font-size: 12px">{{ question.favorites }}</span>
        </a-tooltip>
        <a-tooltip :content="'共有' + question.submissionCount + '次提交'" mini background-color="#3491FA">
          <icon-pen-fill/>
          <span style="font-size: 12px">{{ question.submissionCount }}</span>
        </a-tooltip>
        <a-tooltip :content="'共有' + question.acceptedCount + '次通过'" mini background-color="#3491FA">
          <icon-check-circle-fill/>
          <span style="font-size: 12px">{{ question.acceptedCount }}</span>
        </a-tooltip>
      </a-space>
    </template>
    <template #title>
      <span style="font-weight: bold; font-size: 25px">{{ question.id }} - {{ question.title }}</span>
    </template>
    <a-tabs type="line" size="small">
      <a-tab-pane key="1" title="题目描述">
        <a-row>
          <a-col :span="14">
            <a-space wrap>
              <a-tag v-for="tag in question.tags" :key="tag" color="green"
              >{{ tag }}
              </a-tag>
            </a-space>
          </a-col>
          <a-col :span="10">
            <a-space size="medium">
                    <span>
                      时间限制：{{ question.timeLimit }} s
                    </span>
              <span>
                      空间限制：{{ question.memoryLimit }} mb
                    </span>
            </a-space>
          </a-col>
        </a-row>
        <a-row style="margin-top: 20px">
          <a-col
          ><span style="font-style: italic; font-weight: bold"
          >题目作者：{{ question.author ? question.author : "佚名" }}</span
          ></a-col
          >
        </a-row>
        <MarkdownViewer :value="question.content"/>
      </a-tab-pane>
      <template v-if="mode === ProblemShowModeEnum.NORMAL">
        <a-tab-pane key="2" title="题解">
          <QuestionNote/>
        </a-tab-pane>
        <a-tab-pane key="3" title="评论">
          <QuestionComment/>
        </a-tab-pane>
      </template>
    </a-tabs>
  </a-card>
</template>

<script setup>
import {defineProps, onMounted, ref} from "vue";
import {ProblemShowModeEnum} from "../../common/enums/problem.js";
import MarkdownViewer from "../editor/MarkdownViewer.vue";
import QuestionNote from "./QuestionNote.vue";
import QuestionComment from "./QuestionComment.vue";

const props = defineProps({
  question: Object,
  mode: {
    type: String,
    default: "0",
  },

});

const question = ref({});
onMounted(() => {
  question.value = props.question
  question.value.tags = JSON.parse(props.question.tags)
})
</script>

<style scoped>

</style>
